<template>
  <Navi :title="['我的贴子','我的收藏'][type]" back="1"></Navi>
  <div class="main" @scroll="scroll_bottom" ref="scroll" v-scrollBtm="{bottom:123}">
    <div class="item" v-for="(item, index) in data" :key="index">
      <div class="head">
        <div>心情</div>
        <div v-for="i in item.mood" :key="i">
          <i class="iconfont icon-aixin"></i>
        </div>
        <div class="diary_caozuo">
          <i class="iconfont icon-jubao" @click.stop="show_caozuo(index)"></i>
          <ul :class="caozuo_active==index?'active':''">
            <li v-if="item.diary_master==user_data.user_id">删除这条帖子</li>
            <li>举报</li>
          </ul>
        </div>
      </div>
      <div class="body" @click.stop="goto_detail(item)">
        <div class="user_head_view">
          <div class="user_head">
            <img :src="item.head_icon" @error="imgOnerror($event)" />
          </div>
          <div class="user_message">
            <span class="name">{{ item.name }}</span>
            <span class="signature">{{ item.Personal_signature }}</span>
          </div>
          <span class="time">{{times(item.time)}}</span>
        </div>
        <div class="text_view">{{ item.text }}</div>
        <div class="img_list" v-if="item.img.length>1">
          <div class="img_item" v-for="(item, index) in item.img" :key="index" :src="item" v-aspectfill></div>
        </div>
        <div class="img_list" v-else-if="item.img.length==1">
          <img  :src="item.img[0]" style="max-height:400rem" />
        </div>
      <hr style="margin-top: 15rem" size="1" />
      <div class="foot">
        
        <div class="foot_item">
          <i :class="['iconfont icon-aixin1','iconfont icon-aixin'][item.love]" @click.stop="love(item,index)"></i>
        </div>
        <div class="foot_item" @click.stop="goto_detail(item)">
          <i class="iconfont icon-pinglun"></i>
        </div>
        <div class="foot_item">
          <i :class="['iconfont icon-31shoucang','iconfont icon-shoucang'][item.collect]" @click.stop="collect(item,index)"></i>
        </div>
      </div>
      
    </div>
    </div>
  </div>
</template>
<script>
export default {
  emits: {
    emit: () => {
      console.log("haha");
      return true;
    },
  },
  created() {
    this.user_data=JSON.parse(sessionStorage.getItem('user_data')) 
    this.type=this.$route.query.type
    this.get_data()
    },
  data() {
    return {
      type:0,
      user_data:{},
      data: [
        
      ],
      caozuo_active:null,
      scroll_ready:true,
      page:1,
    };
  },
  computed:{
    
  },
  methods: {
    times(time){
      return this.$time(time)
    } ,
    get_data(){
      this.$ajax.post('getDiary',{
        limit:10,
        page:this.page,
        type:['me','collect'][this.type]
      },res=>{
        console.log(res)
        let data= this.$ajax.test_page(res,this.page,this.data)
        this.data=data.data
        this.page=data.page
      })
    },
    goto_detail(item){
      
      this.$router.push({path:'/diary_detail',query:{data:JSON.stringify(item)}})
    },
    accepted() {
      this.$emit("emit");
    },
    imgOnerror(e) {
      let img = e.srcElement;
      console.log(e);
      img.src = require("/public/img/err.png");
      img.onerror = null;
    },
    show_caozuo(index){
      this.caozuo_active==index?this.caozuo_active=null:this.caozuo_active=index
    },
    scroll_bottom(el){
      if(!this.scroll_ready) return
      //if(this.scroll_ready){
        let e=this.$refs.scroll
        //this.scroll_ready=false
        if(e.scrollHeight - e.scrollTop <= e.clientHeight+1){
            this.scroll_ready=false
            this.get_data()
          setTimeout(()=>{
            this.scroll_ready=true
          },2000)
          // return
        }
    },
    add_love(item,index){
      this.$ajax.post(item.love?'del_love':'add_love',{diary_id:item.id},res=>{
        this.data[index].love=Math.abs(this.data[index].love-1)
      })
    }
  },
  directives:{
    scrollBtm:{
      function(el,binding){
        console.log(binding.value.bottom)
        console.log(123)
      }
    }
  },
  computed: {
    my_head_icon() {
      return sessionStorage.getItem("head_icon") || "123";
    },
  },
};
</script>
<style lang="less" scoped>
.icon-shoucang{
  color:gold;
}
.main {
  overflow-y: scroll;
  height: 100vh;
  box-sizing: border-box;
  background: #EDF1FA;
  .item {
    background: #fff;
    border-radius: 10rem;
    font-size: 30rem;
    margin: 20rem 30rem;
    padding: 20rem;
    .head {
      i {
        font-size: 40rem;
      }
      .icon-aixin {
        color: red;
      }
      display: flex;
      align-items: center;
      .diary_caozuo {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        position: relative;
        .active{
          height: 144rem;
          transition: height 1s;
        }
        ul{
            overflow: hidden;
            height: 0rem;
            font-size: 30rem;
            position: absolute;
            top: 50rem;
            display: flex;
            flex-direction: column;
            background: #f8f8f8;
            border-radius: 10rem;
            transition: height 1s;
            li{
                  padding: 20rem 10rem;
                  border-bottom: 1px solid #fff;
            }
        }
      }
    }
    .body {
      margin-top: 30rem;
      .user_head_view {
        display: flex;
        .user_head img {
          border-radius: 50%;
          width: 100rem;
          height: 100rem;
          margin-right: 30rem;
        }
        .time{
          font-weight: 400;
          color: #AAAAAA;
          flex: 1;
          text-align: right;
          line-height: 106rem;
          padding-right: 38rem;
        }
        .user_message {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: flex-start;
        }
      }
      .text_view {
        padding: 0 20rem;
        margin: 30rem 0rem;
        text-align: left;
        text-indent: 2em;
        word-break: break-all;
      }
      .img_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .img_item {
            margin:10rem;
          width: 200rem;
          height: 200rem;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .foot {
      margin: 15rem 0rem;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 10rem;
      font-size: 40rem;
      font-weight: 500;
      position: relative;
      .foot_item {
        display: flex;
        align-items: center;
        justify-items: center;
        margin-right: 30rem;
        span{
          font-size: 25rem;
        }
      }
    }
    .talk_view {
      padding: 30rem 0;
      border-top: 1px solid #8f8f8f;
      .talk_item{
          text-align: left;
            margin-left: 1em;
            margin-bottom: 15rem;
            transform-origin: top center;
    transform: rotateX(0);
      }
    }
  }
}
</style>